<template>
  <div class="wrap">
    <van-nav-bar
      title="我的意见"
      placeholder
      fixed
      left-arrow
      style="background: #fff"
      @click="toBack"
    />
    <div class="wrap_cont">
      <div class="top">
        <base-title title="意见类型" :isBold="true" size="18px"></base-title>
        <div class="top_change">
          <span v-for="(item, i) in yjType" :key="i">{{ item.title }}</span>
        </div>
      </div>
      <div style="height: 8px; background: #f4f8ff; width: 100%"></div>
      <div class="bottom">
        <base-title title="问题描述" :isBold="true" size="18px"></base-title>
        <div class="from">
          <div class="text">
            <van-field
              v-model="message"
              rows="2"
              autosize
              type="textarea"
              placeholder="请输入"
            />
          </div>
          <div class="sc"><van-uploader v-model="fileList" multiple /></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import baseTitle from "@components/baseTitle.vue";
const toBack = () => {
  window.history.back();
};
const yjType = [
  {
    title: "课程相关",
    value: "kcxg",
  },
  {
    title: "公司相关",
    value: "gsxg",
  },
  {
    title: "其他",
    value: "qt",
  },
];
const message = ref("");
const fileList = ref([
  { url: "https://fastly.jsdelivr.net/npm/@vant/assets/leaf.jpeg" },
  // Uploader 根据文件后缀来判断是否为图片文件
  // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明
  { url: "https://cloud-image", isImage: true },
]);
</script>

<style lang="scss" scoped>
.wrap {
  &_cont {
    margin-top: 4px;
    .top {
      padding: 0 15px;
      ::v-deep(.base-title) {
        padding: 22px 0 9px;
      }
      .top_change {
        margin-top: 4px;
        padding-bottom: 19px;
        span {
          background: #f1f1f1;
          border-radius: 16px;
          display: inline-block;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 12px;
          color: #676b6b;
          padding: 5px 13px;
          margin-right: 14px;
          margin-left: 2px;
          cursor: pointer;
        }
      }
    }
    .bottom {
      padding: 0 15px;
      ::v-deep(.base-title) {
        padding: 22px 0 9px;
      }
      ::v-deep(.van-field__control::placeholder) {
        color: #b9bdbd;
      }
      .text {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 16px;
        color: #676b6b;
      }
      .sc {
        margin-top: 53px;
      }
    }
  }
}
</style>
